<template>
  <div class="visitPeriod">
    <div
      class="visitPeriod__title"
      @click="addForm"
      v-if="formStore.isDesigner"
    >
      添加表单
    </div>
    <el-scrollbar class="visitPeriod__content" v-if="formList.length > 0">
      <div
        v-for="(form, fIdx) in formList"
        :key="form.id"
        class="visitPeriod__content-item"
        :class="
          form.id === formStore.formConfig.id &&
          'visitPeriod__content-item-current'
        "
        @click="getForm(form)"
      >
        <span class="visitPeriod__content-item-name">{{ form.name }}</span>
        <div class="visitPeriod__content-item-opts" v-if="formStore.isDesigner">
          <el-icon
            class="visitPeriod__content-item-opts-edit"
            @click.stop="editForm(form.id)"
          >
            <Edit />
          </el-icon>
          <el-icon @click="deleteForm(form.id, fIdx)">
            <CircleClose />
          </el-icon>
        </div>
      </div>
    </el-scrollbar>
    <FormDia
      ref="formDiaRef"
      :form-type="formType"
      :id="selectId"
      @add-success="getFormList(false)"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import FormRequest from "@bis/requests/form";
import { useFormStore } from "@bis/stores/form";
import FormListResponse from "@bis/interface/form/list";
import FormResponse from "@bis/interface/form";
import BaseResponse from "@bis/interface";
import FormType from "@bis/types/form";
import { ElMessage } from "element-plus";
import FormDia from "../formDia/index.vue";
import { dealQue, getAnswers } from "../../utils";

const formStore = useFormStore();

const formList = ref<FormType[]>([]);
const formDiaRef = ref(null);
const formType = ref("add");
const selectId = ref(null);

// 获取表单列表
const getFormList = async (needGet = true) => {
  const res: FormListResponse = await FormRequest.getFormList({
    platformId: 1,
    formDepotId: formStore.formConfig.formDepotId,
  });
  if (res.code === 200) {
    formList.value = res.data.list || [];
    const firstForm = formList.value[0];
    if (firstForm && needGet) {
      await getForm(firstForm);
    }
  } else {
    ElMessage.error("网络异常");
    formStore.reset();
  }
};

// 获取表单
const getForm = async (form) => {
  const res: FormResponse = await FormRequest.getForm({
    id: form.id,
    platformId: 1,
  });
  if (res.code === 200) {
    formStore.formConfig = form;
    let answers = [];
    if (!formStore.isDesigner) {
      answers = await getAnswers({
        formId: form.id,
        platformId: 1,
        userId: 1,
      });
    }
    console.log(formStore, 879897879879);
    const list = res.data.questions?.map((que) => {
      return dealQue({ question: que, formStore, answers });
    });
    formStore.setQuestions(list);
  }
};

// 添加表单
const addForm = () => {
  formType.value = "add";
  formDiaRef.value.showDiaFunc();
};

// 删除表单
const deleteForm = async (id, fIdx) => {
  const res: BaseResponse = await FormRequest.deleteForm({ id, platformId: 1 });
  if (res.code === 200) {
    ElMessage.success("删除成功");
    formList.value.splice(fIdx, 1);
    if (formStore.formConfig.id !== id) {
      return;
    }
    if (formList.value.length === 0) {
      formStore.reset(true);
      return;
    }
    const _index = fIdx === 0 ? 0 : fIdx - 1;
    await getForm(formList.value[_index]);
  }
};
// 修改表单
const editForm = (id) => {
  selectId.value = id;
  formType.value = "edit";
  formDiaRef.value.showDiaFunc();
};

defineExpose({
  getFormList,
});
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
